<template>
	<view class="zx-progress">
		<canvas class="progress_bg" canvas-id="cpbg"></canvas>
		<canvas class="progress_bar" canvas-id="cpbar"></canvas>
		<view class="progress" >
			<view class="progressbox" >
				<image src="../../static/progress/progress1.png" mode="widthFix" class="img1" ></image>
				<image src="../../static/progress/progress2.png" mode="widthFix" class="img2" ></image>
				<image src="../../static/progress/progress3.png" mode="widthFix" class="img3" ></image>
				<image src="../../static/progress/progress4.png" mode="widthFix" class="img4" ></image>
			</view>
		</view>
		<view class="progress_text">
			<p class="title">{{progress_per}}%</p>
			<p class="subtitle">{{progress_txt}}</p>
		</view>
	</view>
</template>

<script>
	var _this
	export default {
		name:"zx-progress",
		props:{
			//进度百分比
			progress_per:{ 
				type: Number,
				default:90,
			},
			//文案
			progress_txt:{ 
				type: String,
				default:'已使用空间',
			},
			//圆环颜色
			progress_ring_color:{ 
				type: String,
				default:'#fff',
			},
			//进度颜色
			progress_color:{ 
				type: String,
				default:'#00FFDD',
			},
		},
		data() {
			return {
				//px和rpx比例
				scale:0,
			};
		},
		mounted: function() {
			_this = this
			const system = uni.getSystemInfoSync()
			this.scale = system.windowWidth / 750
			this.drawProgressbg();
			this.drawCircle(this.progress_txt); //参数为1-100
		},
		methods: {
			drawProgressbg: function() {
				// 自定义组件实例 this ，表示在这个自定义组件下查找拥有 canvas-id 的 <canvas/>
				var ctx = uni.createCanvasContext('cpbg', this);
				ctx.setLineWidth(4); // 设置圆环的宽度
				ctx.setStrokeStyle(_this.progress_ring_color); // 设置圆环的颜色
				ctx.setLineCap('round'); // 设置圆环端点的形状
				ctx.beginPath(); //开始一个新的路径
				ctx.arc(130*this.scale,130*this.scale, 124*this.scale, 0,2*Math.PI, false);
				//设置一个原点(110,110)，半径为100的圆的路径到当前路径
				ctx.stroke(); //对当前路径进行描边
				ctx.draw();
			},
			drawCircle: function(step) {
				var ctx = uni.createCanvasContext('cpbar', this);
				// 进度条的渐变(中心x坐标-半径-边宽，中心Y坐标，中心x坐标+半径+边宽，中心Y坐标)
				var gradient = ctx.createLinearGradient(28, 55, 192, 55);
		
				ctx.beginPath();
				// 参数step 为绘制的百分比
				step =  (step * 0.01)+0.1;
				let i =0.01
				let time = setInterval(function(){
					i+=0.01
					if(i>step){
						clearInterval(time)
					}
					gradient.addColorStop('0', _this.progress_color);
					gradient.addColorStop('1.0', _this.progress_color);
					ctx.setLineWidth(4);
					ctx.setStrokeStyle(gradient);
					ctx.setLineCap('round');
					ctx.arc(130*_this.scale,130*_this.scale, 124*_this.scale, -2*Math.PI*(0.1), -2*Math.PI*(i),  true);
					ctx.stroke();
					ctx.draw();

				},10)
			}
		}
	}
</script>c

<style lang="scss">
	.zx-progress{
		position: relative;
		width: 260rpx;
		height: 260rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
		overflow: hidden;
		// border: 1px solid #000;
		border-radius: 50%;
		.progress_bg {
			position: absolute;
			width: 260rpx;
			height: 260rpx;
		}
		.progress_bar {
			width: 260rpx;
			height: 260rpx;
		}
		.progress_txt {
			position: absolute;
			font-size: 28rpx;
			color: #999999;
		}
		.progress_info {
			font-size: 36rpx;
			padding-left: 16rpx;
			letter-spacing: 2rpx;
			font-size: 52rpx;
			color: #333333;
		}
		.progress_dot {
			width: 12rpx;
			height: 12rpx;
			border-radius: 50%;
			background-color: #fb9126;
		}
		.progress{
			position: absolute;
			bottom: 60rpx;
			left: 0;
			.progressbox{
				position: relative;
				
				image{
					width: 400rpx;
					position: absolute;
					top: 0;
					left: -80px;
					animation: myfirst 3s linear  infinite alternate;
				}
				.img1{
					animation-delay: 0s;
				}
				.img2{
					animation-delay: 0.8s;
				}
				.img3{
					animation-delay: 1.2s;
				}
				.img4{
					animation-delay: 1.8s;
				}
			}
		}
		.progress_text{
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: center;
			align-content: center;
			flex-wrap: wrap;
			position: absolute;
			top: 0;
			left: 0;
			p{
				flex:0 0 100%;
				color: #fff;
			}
			.title{
				font-size: 64rpx;
			}
			.subtitle{
				font-size: 28rpx;
			}
		}
		
		@keyframes myfirst
		{
		    from {left: -80px;}
		    to {left: 0rpx;}
		}
	}
</style>